<!--  -->
<template>
  <div class="Activepage">
    <div class="row">
      <ul class="pagination">
        <li class="prev" v-show="currentPage != 1" @click="cur--, pageclick()">
          上一页
        </li>
        <li
          class="item"
          v-show="currentPage > 4"
          @click="(cur = 1), pageclick()"
        >
          1
        </li>
        <li class="omit" v-show="currentPage > 4">...</li>
        <li
          class="item"
          :class="{ active: currentPage == index }"
          v-for="index in indexs"
          :key="index"
          @click="btnclick(index, $event)"
        >
          {{ index }}
        </li>
        <li class="omit" v-show="currentPage < pages - 3">...</li>
        <li
          class="item"
          v-show="currentPage < pages - 3"
          @click="(cur = pages), pageclick()"
        >
          {{ pages }}
        </li>
        <li
          class="next"
          v-show="currentPage != pages"
          @click="cur++, pageclick()"
        >
          下一页
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: ["pageSize", "currentPage", "total", "onPage"],
  data() {
    return {
      cur: this.currentPage,
      pages: 0,
    };
  },
  mounted() {
    if (!this.total) return;
    this.pages = Math.ceil(this.total / this.pageSize);
  },
  methods: {
    // 点击li的事件
    btnclick: function(index, event) {
      // 传值给父组件的方法
      this.$emit("onPage", index);
      // 让当前值相等
      if (index != this.cur) {
        this.cur = index;
      }
    },
    // 点击上一页，下一页事件
    pageclick: function() {
      if (this.cur < 1) {
        this.cur = 1;
      } else if (this.cur > this.pages) {
        this.cur = this.pages;
      }
      this.$emit("onPage", this.cur);
    },
  },
  watch: {
    total(num) {
      if (!num) return;
      this.pages = Math.ceil(num / this.pageSize);
    },
  },
  computed: {
    indexs() {
      var left = 1;
      var right = this.pages;
      var arr = [];
      // 展示底部的分页一直有5个
      if (this.pages >= 5) {
        if (this.currentPage > 4 && this.currentPage < this.pages - 3) {
          left = parseInt(this.currentPage) - 2;
          right = parseInt(this.currentPage) + 2;
        } else {
          if (this.currentPage <= 4) {
            left = 1;
            right = 5;
          } else {
            right = this.pages;
            left = this.pages - 4;
          }
        }
      }
      while (left <= right) {
        arr.push(left);
        left++;
      }
      return arr;
    },
  },
};
</script>
<style lang="scss" scoped>
.Activepage {
  color: #fff;
  padding-top: 25px;
  .row {
    text-align: center;
    .pagination {
      display: inline-block;
      li {
        display: inline-block;
        font-size: 18px;
        margin: 10px;
        &.omit {
          margin: 0;
        }
        &.prev,
        &.next {
          color: #cccccc;
          cursor: pointer;
        }

        &.item {
          width: 26px;
          cursor: pointer;
          height: 26px;
          line-height: 26px;
          //   text-align: center;
          border: 2px solid #666666;
          color: #999999;
          &.active {
            color: #2c7eff;
            border: 2px solid #2c7eff;
          }
        }
      }
    }
  }
}
</style>
